* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: black;
  color: #fff;
  overflow: hidden;
}

* {
  box-sizing: border-box;
}

input {
  display: none;
}

.list {
  text-align: center;
}
.list-item {
  margin: 0.5em;
  font-size: 1.25em;
}
.list-item a {
  text-decoration: none;
}

.link {
  text-transform: uppercase;
  color: #2F8621;
}

.game-field-text {
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  font-weight: 900;
  font-size: 1.5rem;
}
.game-field-color {
  color: #9E2730;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.cell, .game-field {
  border: 0.8vmin solid #000;
}

.game-field {
  display: flex;
  width: 81.6vmin;
  flex-wrap: wrap;
}

.cell {
  max-height: 16vmin;
  max-width: 16vmin;
  overflow: hidden;
}
.cell-bg {
  display: block;
  position: relative;
  height: 14.4vmin;
  width: 14.4vmin;
  background: repeating-linear-gradient(#9E2730 0, #9E2730 16vmin, #2F8621 16vmin, #2F8621 32vmin);
  background-size: 16vmin 400vmin;
  background-position-x: 0;
}

/*
  we set same --from-CURRENT-to-CURRENT - the problem of scope!
  to cell's label
  and to win rule
*/
#cb1:not(:checked) ~ .scope {
  --from-1-to-1-inverted: 1;
}

#cb1:checked ~ .scope {
  --from-1-to-1-inverted: 0;
}

/*
  do the same for all linked cell
*/
#cb1:not(:checked) ~ .scope {
  --from-1-to-20-inverted: 1;
}

#cb1:checked ~ .scope {
  --from-1-to-20-inverted: 0;
}

#cb1:not(:checked) ~ .scope {
  --from-1-to-9-inverted: 1;
}

#cb1:checked ~ .scope {
  --from-1-to-9-inverted: 0;
}

#cb1:not(:checked) ~ .scope {
  --from-1-to-16-inverted: 1;
}

#cb1:checked ~ .scope {
  --from-1-to-16-inverted: 0;
}

/*
  we set same --from-CURRENT-to-CURRENT - the problem of scope!
  to cell's label
  and to win rule
*/
#cb2:not(:checked) ~ .scope {
  --from-2-to-2-inverted: 1;
}

#cb2:checked ~ .scope {
  --from-2-to-2-inverted: 0;
}

/*
  do the same for all linked cell
*/
#cb2:not(:checked) ~ .scope {
  --from-2-to-11-inverted: 1;
}

#cb2:checked ~ .scope {
  --from-2-to-11-inverted: 0;
}

#cb2:not(:checked) ~ .scope {
  --from-2-to-12-inverted: 1;
}

#cb2:checked ~ .scope {
  --from-2-to-12-inverted: 0;
}

#cb2:not(:checked) ~ .scope {
  --from-2-to-18-inverted: 1;
}

#cb2:checked ~ .scope {
  --from-2-to-18-inverted: 0;
}

/*
  we set same --from-CURRENT-to-CURRENT - the problem of scope!
  to cell's label
  and to win rule
*/
#cb3:not(:checked) ~ .scope {
  --from-3-to-3-inverted: 1;
}

#cb3:checked ~ .scope {
  --from-3-to-3-inverted: 0;
}

/*
  do the same for all linked cell
*/
#cb3:not(:checked) ~ .scope {
  --from-3-to-8-inverted: 1;
}

#cb3:checked ~ .scope {
  --from-3-to-8-inverted: 0;
}

#cb3:not(:checked) ~ .scope {
  --from-3-to-19-inverted: 1;
}

#cb3:checked ~ .scope {
  --from-3-to-19-inverted: 0;
}

/*
  we set same --from-CURRENT-to-CURRENT - the problem of scope!
  to cell's label
  and to win rule
*/
#cb4:not(:checked) ~ .scope {
  --from-4-to-4-inverted: 1;
}

#cb4:checked ~ .scope {
  --from-4-to-4-inverted: 0;
}

/*
  do the same for all linked cell
*/
#cb4:not(:checked) ~ .scope {
  --from-4-to-10-inverted: 1;
}

#cb4:checked ~ .scope {
  --from-4-to-10-inverted: 0;
}

#cb4:not(:checked) ~ .scope {
  --from-4-to-5-inverted: 1;
}

#cb4:checked ~ .scope {
  --from-4-to-5-inverted: 0;
}

#cb4:not(:checked) ~ .scope {
  --from-4-to-13-inverted: 1;
}

#cb4:checked ~ .scope {
  --from-4-to-13-inverted: 0;
}

/*
  we set same --from-CURRENT-to-CURRENT - the problem of scope!
  to cell's label
  and to win rule
*/
#cb5:not(:checked) ~ .scope {
  --from-5-to-5-inverted: 1;
}

#cb5:checked ~ .scope {
  --from-5-to-5-inverted: 0;
}

/*
  do the same for all linked cell
*/
#cb5:not(:checked) ~ .scope {
  --from-5-to-22-inverted: 1;
}

#cb5:checked ~ .scope {
  --from-5-to-22-inverted: 0;
}

/*
  we set same --from-CURRENT-to-CURRENT - the problem of scope!
  to cell's label
  and to win rule
*/
#cb6:not(:checked) ~ .scope {
  --from-6-to-6-inverted: 1;
}

#cb6:checked ~ .scope {
  --from-6-to-6-inverted: 0;
}

/*
  do the same for all linked cell
*/
#cb6:not(:checked) ~ .scope {
  --from-6-to-18-inverted: 1;
}

#cb6:checked ~ .scope {
  --from-6-to-18-inverted: 0;
}

#cb6:not(:checked) ~ .scope {
  --from-6-to-5-inverted: 1;
}

#cb6:checked ~ .scope {
  --from-6-to-5-inverted: 0;
}

/*
  we set same --from-CURRENT-to-CURRENT - the problem of scope!
  to cell's label
  and to win rule
*/
#cb7:not(:checked) ~ .scope {
  --from-7-to-7-inverted: 1;
}

#cb7:checked ~ .scope {
  --from-7-to-7-inverted: 0;
}

/*
  do the same for all linked cell
*/
#cb7:not(:checked) ~ .scope {
  --from-7-to-22-inverted: 1;
}

#cb7:checked ~ .scope {
  --from-7-to-22-inverted: 0;
}

#cb7:not(:checked) ~ .scope {
  --from-7-to-15-inverted: 1;
}

#cb7:checked ~ .scope {
  --from-7-to-15-inverted: 0;
}

/*
  we set same --from-CURRENT-to-CURRENT - the problem of scope!
  to cell's label
  and to win rule
*/
#cb8:not(:checked) ~ .scope {
  --from-8-to-8-inverted: 1;
}

#cb8:checked ~ .scope {
  --from-8-to-8-inverted: 0;
}

/*
  do the same for all linked cell
*/
#cb8:not(:checked) ~ .scope {
  --from-8-to-17-inverted: 1;
}

#cb8:checked ~ .scope {
  --from-8-to-17-inverted: 0;
}

#cb8:not(:checked) ~ .scope {
  --from-8-to-3-inverted: 1;
}

#cb8:checked ~ .scope {
  --from-8-to-3-inverted: 0;
}

#cb8:not(:checked) ~ .scope {
  --from-8-to-23-inverted: 1;
}

#cb8:checked ~ .scope {
  --from-8-to-23-inverted: 0;
}

/*
  we set same --from-CURRENT-to-CURRENT - the problem of scope!
  to cell's label
  and to win rule
*/
#cb9:not(:checked) ~ .scope {
  --from-9-to-9-inverted: 1;
}

#cb9:checked ~ .scope {
  --from-9-to-9-inverted: 0;
}

/*
  do the same for all linked cell
*/
#cb9:not(:checked) ~ .scope {
  --from-9-to-11-inverted: 1;
}

#cb9:checked ~ .scope {
  --from-9-to-11-inverted: 0;
}

#cb9:not(:checked) ~ .scope {
  --from-9-to-19-inverted: 1;
}

#cb9:checked ~ .scope {
  --from-9-to-19-inverted: 0;
}

#cb9:not(:checked) ~ .scope {
  --from-9-to-18-inverted: 1;
}

#cb9:checked ~ .scope {
  --from-9-to-18-inverted: 0;
}

/*
  we set same --from-CURRENT-to-CURRENT - the problem of scope!
  to cell's label
  and to win rule
*/
#cb10:not(:checked) ~ .scope {
  --from-10-to-10-inverted: 1;
}

#cb10:checked ~ .scope {
  --from-10-to-10-inverted: 0;
}

/*
  do the same for all linked cell
*/
#cb10:not(:checked) ~ .scope {
  --from-10-to-18-inverted: 1;
}

#cb10:checked ~ .scope {
  --from-10-to-18-inverted: 0;
}

#cb10:not(:checked) ~ .scope {
  --from-10-to-8-inverted: 1;
}

#cb10:checked ~ .scope {
  --from-10-to-8-inverted: 0;
}

/*
  we set same --from-CURRENT-to-CURRENT - the problem of scope!
  to cell's label
  and to win rule
*/
#cb11:not(:checked) ~ .scope {
  --from-11-to-11-inverted: 1;
}

#cb11:checked ~ .scope {
  --from-11-to-11-inverted: 0;
}

/*
  do the same for all linked cell
*/
#cb11:not(:checked) ~ .scope {
  --from-11-to-18-inverted: 1;
}

#cb11:checked ~ .scope {
  --from-11-to-18-inverted: 0;
}

/*
  we set same --from-CURRENT-to-CURRENT - the problem of scope!
  to cell's label
  and to win rule
*/
#cb12:not(:checked) ~ .scope {
  --from-12-to-12-inverted: 1;
}

#cb12:checked ~ .scope {
  --from-12-to-12-inverted: 0;
}

/*
  do the same for all linked cell
*/
#cb12:not(:checked) ~ .scope {
  --from-12-to-4-inverted: 1;
}

#cb12:checked ~ .scope {
  --from-12-to-4-inverted: 0;
}

#cb12:not(:checked) ~ .scope {
  --from-12-to-7-inverted: 1;
}

#cb12:checked ~ .scope {
  --from-12-to-7-inverted: 0;
}

/*
  we set same --from-CURRENT-to-CURRENT - the problem of scope!
  to cell's label
  and to win rule
*/
#cb13:not(:checked) ~ .scope {
  --from-13-to-13-inverted: 1;
}

#cb13:checked ~ .scope {
  --from-13-to-13-inverted: 0;
}

/*
  do the same for all linked cell
*/
#cb13:not(:checked) ~ .scope {
  --from-13-to-3-inverted: 1;
}

#cb13:checked ~ .scope {
  --from-13-to-3-inverted: 0;
}

#cb13:not(:checked) ~ .scope {
  --from-13-to-21-inverted: 1;
}

#cb13:checked ~ .scope {
  --from-13-to-21-inverted: 0;
}

/*
  we set same --from-CURRENT-to-CURRENT - the problem of scope!
  to cell's label
  and to win rule
*/
#cb14:not(:checked) ~ .scope {
  --from-14-to-14-inverted: 1;
}

#cb14:checked ~ .scope {
  --from-14-to-14-inverted: 0;
}

/*
  do the same for all linked cell
*/
#cb14:not(:checked) ~ .scope {
  --from-14-to-10-inverted: 1;
}

#cb14:checked ~ .scope {
  --from-14-to-10-inverted: 0;
}

#cb14:not(:checked) ~ .scope {
  --from-14-to-12-inverted: 1;
}

#cb14:checked ~ .scope {
  --from-14-to-12-inverted: 0;
}

#cb14:not(:checked) ~ .scope {
  --from-14-to-6-inverted: 1;
}

#cb14:checked ~ .scope {
  --from-14-to-6-inverted: 0;
}

/*
  we set same --from-CURRENT-to-CURRENT - the problem of scope!
  to cell's label
  and to win rule
*/
#cb15:not(:checked) ~ .scope {
  --from-15-to-15-inverted: 1;
}

#cb15:checked ~ .scope {
  --from-15-to-15-inverted: 0;
}

/*
  do the same for all linked cell
*/
#cb15:not(:checked) ~ .scope {
  --from-15-to-21-inverted: 1;
}

#cb15:checked ~ .scope {
  --from-15-to-21-inverted: 0;
}

#cb15:not(:checked) ~ .scope {
  --from-15-to-18-inverted: 1;
}

#cb15:checked ~ .scope {
  --from-15-to-18-inverted: 0;
}

/*
  we set same --from-CURRENT-to-CURRENT - the problem of scope!
  to cell's label
  and to win rule
*/
#cb16:not(:checked) ~ .scope {
  --from-16-to-16-inverted: 1;
}

#cb16:checked ~ .scope {
  --from-16-to-16-inverted: 0;
}

/*
  do the same for all linked cell
*/
#cb16:not(:checked) ~ .scope {
  --from-16-to-18-inverted: 1;
}

#cb16:checked ~ .scope {
  --from-16-to-18-inverted: 0;
}

/*
  we set same --from-CURRENT-to-CURRENT - the problem of scope!
  to cell's label
  and to win rule
*/
#cb17:not(:checked) ~ .scope {
  --from-17-to-17-inverted: 1;
}

#cb17:checked ~ .scope {
  --from-17-to-17-inverted: 0;
}

/*
  do the same for all linked cell
*/
#cb17:not(:checked) ~ .scope {
  --from-17-to-3-inverted: 1;
}

#cb17:checked ~ .scope {
  --from-17-to-3-inverted: 0;
}

#cb17:not(:checked) ~ .scope {
  --from-17-to-12-inverted: 1;
}

#cb17:checked ~ .scope {
  --from-17-to-12-inverted: 0;
}

/*
  we set same --from-CURRENT-to-CURRENT - the problem of scope!
  to cell's label
  and to win rule
*/
#cb18:not(:checked) ~ .scope {
  --from-18-to-18-inverted: 1;
}

#cb18:checked ~ .scope {
  --from-18-to-18-inverted: 0;
}

/*
  do the same for all linked cell
*/
#cb18:not(:checked) ~ .scope {
  --from-18-to-13-inverted: 1;
}

#cb18:checked ~ .scope {
  --from-18-to-13-inverted: 0;
}

/*
  we set same --from-CURRENT-to-CURRENT - the problem of scope!
  to cell's label
  and to win rule
*/
#cb19:not(:checked) ~ .scope {
  --from-19-to-19-inverted: 1;
}

#cb19:checked ~ .scope {
  --from-19-to-19-inverted: 0;
}

/*
  do the same for all linked cell
*/
#cb19:not(:checked) ~ .scope {
  --from-19-to-2-inverted: 1;
}

#cb19:checked ~ .scope {
  --from-19-to-2-inverted: 0;
}

#cb19:not(:checked) ~ .scope {
  --from-19-to-3-inverted: 1;
}

#cb19:checked ~ .scope {
  --from-19-to-3-inverted: 0;
}

/*
  we set same --from-CURRENT-to-CURRENT - the problem of scope!
  to cell's label
  and to win rule
*/
#cb20:not(:checked) ~ .scope {
  --from-20-to-20-inverted: 1;
}

#cb20:checked ~ .scope {
  --from-20-to-20-inverted: 0;
}

/*
  do the same for all linked cell
*/
#cb20:not(:checked) ~ .scope {
  --from-20-to-7-inverted: 1;
}

#cb20:checked ~ .scope {
  --from-20-to-7-inverted: 0;
}

/*
  we set same --from-CURRENT-to-CURRENT - the problem of scope!
  to cell's label
  and to win rule
*/
#cb21:not(:checked) ~ .scope {
  --from-21-to-21-inverted: 1;
}

#cb21:checked ~ .scope {
  --from-21-to-21-inverted: 0;
}

/*
  do the same for all linked cell
*/
#cb21:not(:checked) ~ .scope {
  --from-21-to-9-inverted: 1;
}

#cb21:checked ~ .scope {
  --from-21-to-9-inverted: 0;
}

#cb21:not(:checked) ~ .scope {
  --from-21-to-4-inverted: 1;
}

#cb21:checked ~ .scope {
  --from-21-to-4-inverted: 0;
}

/*
  we set same --from-CURRENT-to-CURRENT - the problem of scope!
  to cell's label
  and to win rule
*/
#cb22:not(:checked) ~ .scope {
  --from-22-to-22-inverted: 1;
}

#cb22:checked ~ .scope {
  --from-22-to-22-inverted: 0;
}

/*
  do the same for all linked cell
*/
#cb22:not(:checked) ~ .scope {
  --from-22-to-10-inverted: 1;
}

#cb22:checked ~ .scope {
  --from-22-to-10-inverted: 0;
}

/*
  we set same --from-CURRENT-to-CURRENT - the problem of scope!
  to cell's label
  and to win rule
*/
#cb23:not(:checked) ~ .scope {
  --from-23-to-23-inverted: 1;
}

#cb23:checked ~ .scope {
  --from-23-to-23-inverted: 0;
}

/*
  do the same for all linked cell
*/
#cb23:not(:checked) ~ .scope {
  --from-23-to-17-inverted: 1;
}

#cb23:checked ~ .scope {
  --from-23-to-17-inverted: 0;
}

/*
  we set same --from-CURRENT-to-CURRENT - the problem of scope!
  to cell's label
  and to win rule
*/
#cb24:not(:checked) ~ .scope {
  --from-24-to-24-inverted: 1;
}

#cb24:checked ~ .scope {
  --from-24-to-24-inverted: 0;
}

/*
  do the same for all linked cell
*/
#cb24:not(:checked) ~ .scope {
  --from-24-to-14-inverted: 1;
}

#cb24:checked ~ .scope {
  --from-24-to-14-inverted: 0;
}

/*
  we set same --from-CURRENT-to-CURRENT - the problem of scope!
  to cell's label
  and to win rule
*/
#cb25:not(:checked) ~ .scope {
  --from-25-to-25-inverted: 1;
}

#cb25:checked ~ .scope {
  --from-25-to-25-inverted: 0;
}

/*
  do the same for all linked cell
*/
#cb25:not(:checked) ~ .scope {
  --from-25-to-3-inverted: 1;
}

#cb25:checked ~ .scope {
  --from-25-to-3-inverted: 0;
}

#cb25:not(:checked) ~ .scope {
  --from-25-to-22-inverted: 1;
}

#cb25:checked ~ .scope {
  --from-25-to-22-inverted: 0;
}

/*
  Each cell may invert other cells
*/
.scope {
  --inversion-1-1: var(--from-1-to-1-inverted);
  --1-inverted: var(--inversion-1-1);
}

#s1 {
  background-position-y: calc(var(--inversion-1-1) * 16vmin * 2);
}

.scope {
  --inversion-2-1: var(--from-2-to-2-inverted);
  --inversion-2-2: calc(
    (var(--inversion-2-1) - var(--from-19-to-2-inverted)) * (var(--inversion-2-1) - var(--from-19-to-2-inverted))
  );
  --2-inverted: var(--inversion-2-2);
}

#s2 {
  background-position-y: calc(var(--inversion-2-2) * 16vmin * 2);
}

.scope {
  --inversion-3-1: var(--from-3-to-3-inverted);
  --inversion-3-2: calc(
    (var(--inversion-3-1) - var(--from-8-to-3-inverted)) * (var(--inversion-3-1) - var(--from-8-to-3-inverted))
  );
  --inversion-3-3: calc(
    (var(--inversion-3-2) - var(--from-13-to-3-inverted)) * (var(--inversion-3-2) - var(--from-13-to-3-inverted))
  );
  --inversion-3-4: calc(
    (var(--inversion-3-3) - var(--from-17-to-3-inverted)) * (var(--inversion-3-3) - var(--from-17-to-3-inverted))
  );
  --inversion-3-5: calc(
    (var(--inversion-3-4) - var(--from-19-to-3-inverted)) * (var(--inversion-3-4) - var(--from-19-to-3-inverted))
  );
  --inversion-3-6: calc(
    (var(--inversion-3-5) - var(--from-25-to-3-inverted)) * (var(--inversion-3-5) - var(--from-25-to-3-inverted))
  );
  --3-inverted: var(--inversion-3-6);
}

#s3 {
  background-position-y: calc(var(--inversion-3-6) * 16vmin * 2);
}

.scope {
  --inversion-4-1: var(--from-4-to-4-inverted);
  --inversion-4-2: calc(
    (var(--inversion-4-1) - var(--from-12-to-4-inverted)) * (var(--inversion-4-1) - var(--from-12-to-4-inverted))
  );
  --inversion-4-3: calc(
    (var(--inversion-4-2) - var(--from-21-to-4-inverted)) * (var(--inversion-4-2) - var(--from-21-to-4-inverted))
  );
  --4-inverted: var(--inversion-4-3);
}

#s4 {
  background-position-y: calc(var(--inversion-4-3) * 16vmin * 2);
}

.scope {
  --inversion-5-1: var(--from-5-to-5-inverted);
  --inversion-5-2: calc(
    (var(--inversion-5-1) - var(--from-4-to-5-inverted)) * (var(--inversion-5-1) - var(--from-4-to-5-inverted))
  );
  --inversion-5-3: calc(
    (var(--inversion-5-2) - var(--from-6-to-5-inverted)) * (var(--inversion-5-2) - var(--from-6-to-5-inverted))
  );
  --5-inverted: var(--inversion-5-3);
}

#s5 {
  background-position-y: calc(var(--inversion-5-3) * 16vmin * 2);
}

.scope {
  --inversion-6-1: var(--from-6-to-6-inverted);
  --inversion-6-2: calc(
    (var(--inversion-6-1) - var(--from-14-to-6-inverted)) * (var(--inversion-6-1) - var(--from-14-to-6-inverted))
  );
  --6-inverted: var(--inversion-6-2);
}

#s6 {
  background-position-y: calc(var(--inversion-6-2) * 16vmin * 2);
}

.scope {
  --inversion-7-1: var(--from-7-to-7-inverted);
  --inversion-7-2: calc(
    (var(--inversion-7-1) - var(--from-12-to-7-inverted)) * (var(--inversion-7-1) - var(--from-12-to-7-inverted))
  );
  --inversion-7-3: calc(
    (var(--inversion-7-2) - var(--from-20-to-7-inverted)) * (var(--inversion-7-2) - var(--from-20-to-7-inverted))
  );
  --7-inverted: var(--inversion-7-3);
}

#s7 {
  background-position-y: calc(var(--inversion-7-3) * 16vmin * 2);
}

.scope {
  --inversion-8-1: var(--from-8-to-8-inverted);
  --inversion-8-2: calc(
    (var(--inversion-8-1) - var(--from-3-to-8-inverted)) * (var(--inversion-8-1) - var(--from-3-to-8-inverted))
  );
  --inversion-8-3: calc(
    (var(--inversion-8-2) - var(--from-10-to-8-inverted)) * (var(--inversion-8-2) - var(--from-10-to-8-inverted))
  );
  --8-inverted: var(--inversion-8-3);
}

#s8 {
  background-position-y: calc(var(--inversion-8-3) * 16vmin * 2);
}

.scope {
  --inversion-9-1: var(--from-9-to-9-inverted);
  --inversion-9-2: calc(
    (var(--inversion-9-1) - var(--from-1-to-9-inverted)) * (var(--inversion-9-1) - var(--from-1-to-9-inverted))
  );
  --inversion-9-3: calc(
    (var(--inversion-9-2) - var(--from-21-to-9-inverted)) * (var(--inversion-9-2) - var(--from-21-to-9-inverted))
  );
  --9-inverted: var(--inversion-9-3);
}

#s9 {
  background-position-y: calc(var(--inversion-9-3) * 16vmin * 2);
}

.scope {
  --inversion-10-1: var(--from-10-to-10-inverted);
  --inversion-10-2: calc(
    (var(--inversion-10-1) - var(--from-4-to-10-inverted)) * (var(--inversion-10-1) - var(--from-4-to-10-inverted))
  );
  --inversion-10-3: calc(
    (var(--inversion-10-2) - var(--from-14-to-10-inverted)) * (var(--inversion-10-2) - var(--from-14-to-10-inverted))
  );
  --inversion-10-4: calc(
    (var(--inversion-10-3) - var(--from-22-to-10-inverted)) * (var(--inversion-10-3) - var(--from-22-to-10-inverted))
  );
  --10-inverted: var(--inversion-10-4);
}

#s10 {
  background-position-y: calc(var(--inversion-10-4) * 16vmin * 2);
}

.scope {
  --inversion-11-1: var(--from-11-to-11-inverted);
  --inversion-11-2: calc(
    (var(--inversion-11-1) - var(--from-2-to-11-inverted)) * (var(--inversion-11-1) - var(--from-2-to-11-inverted))
  );
  --inversion-11-3: calc(
    (var(--inversion-11-2) - var(--from-9-to-11-inverted)) * (var(--inversion-11-2) - var(--from-9-to-11-inverted))
  );
  --11-inverted: var(--inversion-11-3);
}

#s11 {
  background-position-y: calc(var(--inversion-11-3) * 16vmin * 2);
}

.scope {
  --inversion-12-1: var(--from-12-to-12-inverted);
  --inversion-12-2: calc(
    (var(--inversion-12-1) - var(--from-2-to-12-inverted)) * (var(--inversion-12-1) - var(--from-2-to-12-inverted))
  );
  --inversion-12-3: calc(
    (var(--inversion-12-2) - var(--from-14-to-12-inverted)) * (var(--inversion-12-2) - var(--from-14-to-12-inverted))
  );
  --inversion-12-4: calc(
    (var(--inversion-12-3) - var(--from-17-to-12-inverted)) * (var(--inversion-12-3) - var(--from-17-to-12-inverted))
  );
  --12-inverted: var(--inversion-12-4);
}

#s12 {
  background-position-y: calc(var(--inversion-12-4) * 16vmin * 2);
}

.scope {
  --inversion-13-1: var(--from-13-to-13-inverted);
  --inversion-13-2: calc(
    (var(--inversion-13-1) - var(--from-4-to-13-inverted)) * (var(--inversion-13-1) - var(--from-4-to-13-inverted))
  );
  --inversion-13-3: calc(
    (var(--inversion-13-2) - var(--from-18-to-13-inverted)) * (var(--inversion-13-2) - var(--from-18-to-13-inverted))
  );
  --13-inverted: var(--inversion-13-3);
}

#s13 {
  background-position-y: calc(var(--inversion-13-3) * 16vmin * 2);
}

.scope {
  --inversion-14-1: var(--from-14-to-14-inverted);
  --inversion-14-2: calc(
    (var(--inversion-14-1) - var(--from-24-to-14-inverted)) * (var(--inversion-14-1) - var(--from-24-to-14-inverted))
  );
  --14-inverted: var(--inversion-14-2);
}

#s14 {
  background-position-y: calc(var(--inversion-14-2) * 16vmin * 2);
}

.scope {
  --inversion-15-1: var(--from-15-to-15-inverted);
  --inversion-15-2: calc(
    (var(--inversion-15-1) - var(--from-7-to-15-inverted)) * (var(--inversion-15-1) - var(--from-7-to-15-inverted))
  );
  --15-inverted: var(--inversion-15-2);
}

#s15 {
  background-position-y: calc(var(--inversion-15-2) * 16vmin * 2);
}

.scope {
  --inversion-16-1: var(--from-16-to-16-inverted);
  --inversion-16-2: calc(
    (var(--inversion-16-1) - var(--from-1-to-16-inverted)) * (var(--inversion-16-1) - var(--from-1-to-16-inverted))
  );
  --16-inverted: var(--inversion-16-2);
}

#s16 {
  background-position-y: calc(var(--inversion-16-2) * 16vmin * 2);
}

.scope {
  --inversion-17-1: var(--from-17-to-17-inverted);
  --inversion-17-2: calc(
    (var(--inversion-17-1) - var(--from-8-to-17-inverted)) * (var(--inversion-17-1) - var(--from-8-to-17-inverted))
  );
  --inversion-17-3: calc(
    (var(--inversion-17-2) - var(--from-23-to-17-inverted)) * (var(--inversion-17-2) - var(--from-23-to-17-inverted))
  );
  --17-inverted: var(--inversion-17-3);
}

#s17 {
  background-position-y: calc(var(--inversion-17-3) * 16vmin * 2);
}

.scope {
  --inversion-18-1: var(--from-18-to-18-inverted);
  --inversion-18-2: calc(
    (var(--inversion-18-1) - var(--from-2-to-18-inverted)) * (var(--inversion-18-1) - var(--from-2-to-18-inverted))
  );
  --inversion-18-3: calc(
    (var(--inversion-18-2) - var(--from-6-to-18-inverted)) * (var(--inversion-18-2) - var(--from-6-to-18-inverted))
  );
  --inversion-18-4: calc(
    (var(--inversion-18-3) - var(--from-9-to-18-inverted)) * (var(--inversion-18-3) - var(--from-9-to-18-inverted))
  );
  --inversion-18-5: calc(
    (var(--inversion-18-4) - var(--from-10-to-18-inverted)) * (var(--inversion-18-4) - var(--from-10-to-18-inverted))
  );
  --inversion-18-6: calc(
    (var(--inversion-18-5) - var(--from-11-to-18-inverted)) * (var(--inversion-18-5) - var(--from-11-to-18-inverted))
  );
  --inversion-18-7: calc(
    (var(--inversion-18-6) - var(--from-15-to-18-inverted)) * (var(--inversion-18-6) - var(--from-15-to-18-inverted))
  );
  --inversion-18-8: calc(
    (var(--inversion-18-7) - var(--from-16-to-18-inverted)) * (var(--inversion-18-7) - var(--from-16-to-18-inverted))
  );
  --18-inverted: var(--inversion-18-8);
}

#s18 {
  background-position-y: calc(var(--inversion-18-8) * 16vmin * 2);
}

.scope {
  --inversion-19-1: var(--from-19-to-19-inverted);
  --inversion-19-2: calc(
    (var(--inversion-19-1) - var(--from-3-to-19-inverted)) * (var(--inversion-19-1) - var(--from-3-to-19-inverted))
  );
  --inversion-19-3: calc(
    (var(--inversion-19-2) - var(--from-9-to-19-inverted)) * (var(--inversion-19-2) - var(--from-9-to-19-inverted))
  );
  --19-inverted: var(--inversion-19-3);
}

#s19 {
  background-position-y: calc(var(--inversion-19-3) * 16vmin * 2);
}

.scope {
  --inversion-20-1: var(--from-20-to-20-inverted);
  --inversion-20-2: calc(
    (var(--inversion-20-1) - var(--from-1-to-20-inverted)) * (var(--inversion-20-1) - var(--from-1-to-20-inverted))
  );
  --20-inverted: var(--inversion-20-2);
}

#s20 {
  background-position-y: calc(var(--inversion-20-2) * 16vmin * 2);
}

.scope {
  --inversion-21-1: var(--from-21-to-21-inverted);
  --inversion-21-2: calc(
    (var(--inversion-21-1) - var(--from-13-to-21-inverted)) * (var(--inversion-21-1) - var(--from-13-to-21-inverted))
  );
  --inversion-21-3: calc(
    (var(--inversion-21-2) - var(--from-15-to-21-inverted)) * (var(--inversion-21-2) - var(--from-15-to-21-inverted))
  );
  --21-inverted: var(--inversion-21-3);
}

#s21 {
  background-position-y: calc(var(--inversion-21-3) * 16vmin * 2);
}

.scope {
  --inversion-22-1: var(--from-22-to-22-inverted);
  --inversion-22-2: calc(
    (var(--inversion-22-1) - var(--from-5-to-22-inverted)) * (var(--inversion-22-1) - var(--from-5-to-22-inverted))
  );
  --inversion-22-3: calc(
    (var(--inversion-22-2) - var(--from-7-to-22-inverted)) * (var(--inversion-22-2) - var(--from-7-to-22-inverted))
  );
  --inversion-22-4: calc(
    (var(--inversion-22-3) - var(--from-25-to-22-inverted)) * (var(--inversion-22-3) - var(--from-25-to-22-inverted))
  );
  --22-inverted: var(--inversion-22-4);
}

#s22 {
  background-position-y: calc(var(--inversion-22-4) * 16vmin * 2);
}

.scope {
  --inversion-23-1: var(--from-23-to-23-inverted);
  --inversion-23-2: calc(
    (var(--inversion-23-1) - var(--from-8-to-23-inverted)) * (var(--inversion-23-1) - var(--from-8-to-23-inverted))
  );
  --23-inverted: var(--inversion-23-2);
}

#s23 {
  background-position-y: calc(var(--inversion-23-2) * 16vmin * 2);
}

.scope {
  --inversion-24-1: var(--from-24-to-24-inverted);
  --24-inverted: var(--inversion-24-1);
}

#s24 {
  background-position-y: calc(var(--inversion-24-1) * 16vmin * 2);
}

.scope {
  --inversion-25-1: var(--from-25-to-25-inverted);
  --25-inverted: var(--inversion-25-1);
}

#s25 {
  background-position-y: calc(var(--inversion-25-1) * 16vmin * 2);
}

@keyframes colorize {
  to {
    background-position: 200% center;
  }
}
@keyframes move {
  0% {
    transform: translate(-50%, -50%);
  }
  25% {
    transform: translate(-50%, -25%);
  }
  50% {
    transform: translate(-50%, -50%);
  }
  75% {
    transform: translate(-50%, -75%);
  }
  100% {
    transform: translate(-50%, -50%);
  }
}
.win {
  display: inline-block;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 5rem;
  text-transform: uppercase;
  font-weight: 900;
  user-select: none;
  pointer-events: none;
  text-align: center;
  background-image: linear-gradient(-90deg, #FF0018 0%, #FFA52C 20%, #FFFF41 40%, #008018 60%, #0000F9 80%, #86007D 100%);
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: colorize 2s linear infinite, move 2s linear infinite;
}

.win {
  --is-win-1: calc(1 - var(--1-inverted));
  --is-win-2: calc(var(--is-win-1) * calc(1 - var(--2-inverted)));
  --is-win-3: calc(var(--is-win-2) * calc(1 - var(--3-inverted)));
  --is-win-4: calc(var(--is-win-3) * calc(1 - var(--4-inverted)));
  --is-win-5: calc(var(--is-win-4) * calc(1 - var(--5-inverted)));
  --is-win-6: calc(var(--is-win-5) * calc(1 - var(--6-inverted)));
  --is-win-7: calc(var(--is-win-6) * calc(1 - var(--7-inverted)));
  --is-win-8: calc(var(--is-win-7) * calc(1 - var(--8-inverted)));
  --is-win-9: calc(var(--is-win-8) * calc(1 - var(--9-inverted)));
  --is-win-10: calc(var(--is-win-9) * calc(1 - var(--10-inverted)));
  --is-win-11: calc(var(--is-win-10) * calc(1 - var(--11-inverted)));
  --is-win-12: calc(var(--is-win-11) * calc(1 - var(--12-inverted)));
  --is-win-13: calc(var(--is-win-12) * calc(1 - var(--13-inverted)));
  --is-win-14: calc(var(--is-win-13) * calc(1 - var(--14-inverted)));
  --is-win-15: calc(var(--is-win-14) * calc(1 - var(--15-inverted)));
  --is-win-16: calc(var(--is-win-15) * calc(1 - var(--16-inverted)));
  --is-win-17: calc(var(--is-win-16) * calc(1 - var(--17-inverted)));
  --is-win-18: calc(var(--is-win-17) * calc(1 - var(--18-inverted)));
  --is-win-19: calc(var(--is-win-18) * calc(1 - var(--19-inverted)));
  --is-win-20: calc(var(--is-win-19) * calc(1 - var(--20-inverted)));
  --is-win-21: calc(var(--is-win-20) * calc(1 - var(--21-inverted)));
  --is-win-22: calc(var(--is-win-21) * calc(1 - var(--22-inverted)));
  --is-win-23: calc(var(--is-win-22) * calc(1 - var(--23-inverted)));
  --is-win-24: calc(var(--is-win-23) * calc(1 - var(--24-inverted)));
  --is-win-25: calc(var(--is-win-24) * calc(1 - var(--25-inverted)));
  opacity: var(--is-win-25);
}